import { forwardRef, useContext, useEffect, useRef, useState } from "react"
import OptionBarBtn from "../../../components/option-bar-btn/OptionBarBtn";
import SymbolPopover from "../../../components/popover/SymbolPopover";
import useReSize from "../../../hooks/useResize";
import ExportPopover from "../../../components/popover/ExportPopover";
import CanoricalMePopover from "../../../components/popover/CanoricalMePopover";
import comDocContext from '../../../context/DocContext';
import { ProfileOutlined } from "@ant-design/icons";

interface Props {
    visible: boolean
    getWordExportParams: Function
    fillSpeciesInfoList: Function
}

const WordExtraOptionBar = (props: Props, ref: any) => {

    const {
        comDocInstance,
    } = useContext(comDocContext);

    const {
        visible,
        getWordExportParams,
        fillSpeciesInfoList
    } = props;

    const containerRef = useRef(null);

    const containerSize = useReSize(containerRef);

    const symbolPopoverRef = useRef(null);
    const canoricalMePopoverRef = useRef(null);

    const symbolBtnRef = useRef(null);
    const canoricalMeRef = useRef(null);

    const [symbolPopoverPosition, setSymbolPopoverPosition] = useState({ clientX: 0, clientY: 0 });
    const [canoricalMePopoverPosition, setCanoricalMePopoverPosition] = useState({ clientX: 0, clientY: 0 });

    const handleOpenSymbolPopover = () => {
        symbolPopoverRef.current.openPopover();
    }

    useEffect(() => {
        measureSymbolPosition();
        measureCanoricalMePosition();
    }, [containerSize, comDocInstance, visible])

    const measureSymbolPosition = () => {
        // const clientRect = symbolBtnRef.current?.getBoundingClientRect();
        // let { top, left } = clientRect;
        // const windowsWidth = window.innerWidth;
        // if (left + 439 < windowsWidth) {
        // } else {
        //     left = windowsWidth - 439;
        // }
        // setSymbolPopoverPosition({ clientX: left, clientY: top + 64 })
    }

    const measureCanoricalMePosition = () => {
        const clientRect = canoricalMeRef.current?.getBoundingClientRect();
        let { top, left } = clientRect;
        const windowsWidth = window.innerWidth;
        if (left + 300 < windowsWidth) {
        } else {
            left = windowsWidth - 324;
        }
        setCanoricalMePopoverPosition({ clientX: left, clientY: top + 64 })
    }

    const exportPopoverRef = useRef(null);

    const exportBtnRef = useRef(null);

    const [exportPopoverPosition, setExportPopoverPosition] = useState({ clientX: 0, clientY: 0 })

    const handleOpenExportPopover = () => {
        exportPopoverRef.current.openPopover();
    }

    useEffect(() => {
        // const clientRect = exportBtnRef.current?.getBoundingClientRect();
        // const { top, left } = clientRect;
        // setExportPopoverPosition({ clientX: left - 25, clientY: top + 64 })
    }, [containerSize])

    const _getWordExportParams = () => {
        const params = getWordExportParams();
        // console.log("params--->", params)
        return params;
    }

    const showCanoricalMePopover = () => {
        canoricalMePopoverRef.current.openPopover();
    }

    return (
        <div
            ref={containerRef}
            className='edit-page-option-row-item flex-col'
            style={{ width: '110px' }}
        >
            <div className='edit-page-option-row-half flex-row' style={{ height: '100%' }}>
                {/* <div
                    ref={exportBtnRef}
                >
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '21px' }} className='iconfont-1 ghzs-gray-daochuword' />}
                        size={'large'}
                        name={'导出'}
                        onClick={handleOpenExportPopover}
                    />
                </div> */}
                {/* <OptionBarBtn
                    icon={<i style={{ fontSize: '24px' }} className='iconfont ghzs-color-a-bianzu27' />}
                    size={'large'}
                    name={'查找'}
                /> */}
                {/* <div
                    ref={symbolBtnRef}
                >
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '20px' }} className='iconfont-1 ghzs-gray-fuhao' />}
                        size={'large'}
                        name={'符号'}
                        onClick={handleOpenSymbolPopover}
                    />
                </div> */}
                <div
                    ref={canoricalMeRef}
                >
                    <OptionBarBtn
                        icon={<ProfileOutlined style={{ fontSize: 21 }} />}
                        size={'large'}
                        tooltipTitle={"拉丁名填充"}
                        tooltipDesc={"为光标选中或所处段落的文本，自动填充物种拉丁名（需至少上传一份物种名单）"}
                        name={'拉丁名填充'}
                        onClick={showCanoricalMePopover}
                    />
                </div>
            </div>
            <SymbolPopover
                ref={symbolPopoverRef}
                clientX={symbolPopoverPosition.clientX}
                clientY={symbolPopoverPosition.clientY}
            />
            <ExportPopover
                ref={exportPopoverRef}
                type={'word'}
                exportWord={_getWordExportParams}
                clientX={exportPopoverPosition.clientX}
                clientY={exportPopoverPosition.clientY}
                comDocInstance={comDocInstance}
            />
            <CanoricalMePopover
                ref={canoricalMePopoverRef}
                fillSpeciesInfoList={fillSpeciesInfoList}
                clientX={canoricalMePopoverPosition.clientX}
                clientY={canoricalMePopoverPosition.clientY}
            />
        </div>
    )
}


export default forwardRef(WordExtraOptionBar);
